<?php
    session_start();
    include("includes/connect_db.php");
?>

<?php
    $id_kontak = $_GET['id'];
    $sql = "SELECT * FROM tb_kontak WHERE id_kontak = '$id_kontak'";
    $query = mysql_query($sql);
    $hasil = mysql_fetch_array($query);
?>

<STYLE TYPE="text/css">
    .form-modal-kontak .modal-header{
        background-color: #08c;
        color: #FFF;
    }
    .close{
        color: #FFF;
    }
    .form-modal-kontak .row-fluid{
        min-height: 50px;
    }
    .body-kontak{
        max-height: 400px;
        overflow: auto;
    }
    .valNama, .valNomor{
        font-size: 8pt;
        color: red;
        font-style: italic;
    }
    .input-append .add-on, .input-prepend .add-on{
        background-color: #FFF;
    }
    .form-modal-kontak .add-on{
        cursor: pointer;
    }
    #form-modal-kontak .icon{
        color: #08c;
    }
</STYLE>

<div id="form-modal-kontak" class="modal hide fade form-modal-kontak" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button>
        <h3 id="myModalLabel">
            Edit Kontak
        </h3>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" id="form">
            <div class="row-fluid">
                <div class="span12 body-kontak">
                    <div class="span12">
                        <div class="control-group namaKontak">
                            <label class="control-label">Nama</label>
                            <div class="controls">
                                <input placeholder="Masukkan Nama" type="text" class="nama" value="<?php echo $hasil['nama_kontak']; ?>">
                                <input type="hidden" class="cekNama" value="">
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">Email</label>
                            <div class="controls">
                                <input placeholder="Masukkan Email" type="email" class="email" value="<?php echo $hasil['email']; ?>">
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <label class="control-label">Jenis Kelamin</label>
                            <div class="controls">
                                <?php
                                    if ($hasil['jenis_kelamin'] == 'l') {
                                        echo "<i class='icon icon-check icon-large jenis-l'></i> Laki-Laki";
                                        echo "<i class='icon icon-check-empty icon-large jenis-p'></i> Perempuan";
                                        echo "<input type='hidden' value='l' class='jenis_kelamin'>";
                                    } else {
                                        echo "<i class='icon icon-check-empty icon-large jenis-l'></i> Laki-Laki";
                                        echo "<i class='icon icon-check icon-large jenis-p'></i> Perempuan";
                                        echo "<input type='hidden' value='p' class='jenis_kelamin'>";
                                    }
                                ?>
                                
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label">Alamat</label>
                            <div class="controls">
                                <textarea placeholder="Masukkan Alamat" class="alamat" style="height: 50px; overflow: hidden; word-wrap: break-word; resize: none;"><?php echo $hasil['alamat']; ?></textarea>
                            </div>
                        </div>
                        
                        <div class="control-group">
                            <label class="control-label">Tanggal Lahir</label>
                            <div class="controls">
                                <input placeholder="Masukkan Tanggal Lahir" type="date" value="<?php echo $hasil[tanggal_lahir]; ?>" class="datePicker tanggal">
                            </div>
                        </div>
                        
                        <div class="control-group nomorKontak inputNomor">
                            <label class="control-label">No. Telepon</label>
                            <?php 
                                $i = 1;
                                $sql_rincian = "SELECT * FROM tb_kontak_rincian WHERE id_kontak = '$hasil[id_kontak]'";
                                $query_rincian = mysql_query($sql_rincian);
                                while ($rincian = mysql_fetch_array($query_rincian)) {
                                    if ($i == 1) {
                                        echo "<div class='controls'>";
                                            echo "<div class='control-group' style='margin: 0px; padding: 0px;'>";
                                                echo "<div class='input-append'>";
                                                    echo "<input placeholder='Masukkan Nomor Telepon' type='text' class='nomor' value='$rincian[no_hp]'>";
                                                    echo "<input type='hidden' class='cekNomor' value=''>";
                                                    if ($rincian['is_primary'] == '1') {
                                                        echo "<input type='hidden' class='primary' value='1'>";
                                                        echo "<span class='add-on'><i class='icon icon-check icon-large check-pri'></i></span>";   
                                                    } else {
                                                        echo "<input type='hidden' class='primary' value='0'>";
                                                        echo "<span class='add-on'><i class='icon icon-check-empty icon-large check-pri'></i></span>";
                                                    }
                                                echo "</div>";
                                                echo "<div class='valNomor'></div>";
                                            echo "</div>";
                                        echo "</div>";
                                    } else {
                                        echo "<div class='controls inputNomor'>";
                                            echo "<div class='control-group' style='padding: 0px; margin: 0px;'>";
                                                echo "<div class='input-append'>";
                                                    echo "<input type='text' placeholder='Masukkan Nomor Telepon' class='nomor' value='$rincian[no_hp]'>";
                                                    echo "<input type='hidden' class='cekNomor' value=''>";
                                                    if ($rincian['is_primary'] == '1') {
                                                        echo "<input type='hidden' class='primary' value='1'>";
                                                        echo "<span class='add-on'><i class='icon icon-check icon-large check-pri'></i></span>";   
                                                    } else {
                                                        echo "<input type='hidden' class='primary' value='0'>";
                                                        echo "<span class='add-on'><i class='icon icon-check-empty icon-large check-pri'></i></span>";
                                                    }
                                                    echo "<button type='button' class='btn btn-danger remove-ext'>";
                                                        echo "<i class='icon-white icon-remove'></i>";
                                                    echo "</button>";
                                                echo "</div>";
                                                echo "<div class='valNomor'></div>";
                                            echo "</div>";
                                        echo "</div>";
                                    }
                                    $i++;
                                }
                            ?>
                        </div>
                        
                        <div class="control-group">
                            <div class="controls">
                                <button class="btn btn-primary tambahNomor"><i class="icon-white icon-plus"></i>Tambah Nomor</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="breadcrumb well">
                            <button class="btn btn-info simpanKontak"><i class="icon-white icon-ok"></i> Simpan</button>
                            <button class="btn btn-danger batalKontak"><i class="icon-white icon-remove"></i> Batal</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<script type="text/javascript">
    var arrNomor = [];
    var arrTempNomor = [];

    $(document).ready(function(){
        $('#form-modal-kontak').modal('show');

        $('#form').submit(function(){
            return false;
        });
        $('.datePicker').datepicker({
            changeYear:'true',
            changeMonth:'true',
            yearRange:'1945:+2',         
            dateFormat: 'yy-mm-dd'
        });

        $('.datePicker').change(function() {
            this.focus();
        });

        $('.batalKontak').click(function(){
            $('#form-modal-kontak').modal('hide');
        });

        $('.tambahNomor').click(function(){
            $('.nomorKontak').append(
                "<div class='controls inputNomor'>"+
                    "<div class='control-group' style='padding: 0px; margin: 0px;'>"+
                        "<div class='input-append'>"+
                            "<input type='text' placeholder='Masukkan Nomor Telepon' class='nomor' value=''>"+
                            "<input type='hidden' class='cekNomor' value=''>"+
                            "<input type='hidden' class='primary' value='0'>"+
                            "<span class='add-on'><i class='icon icon-check-empty icon-large check-pri'></i></span>"+
                            "<button type='button' class='btn btn-danger remove-ext'>"+
                                "<i class='icon-white icon-remove'></i>"+
                            "</button>"+
                        "</div>"+
                        "<div class='valNomor'></div>"+
                    "</div>"+
                "</div>"  
            );
        });

        $('.remove-ext').live('click', function(){
            $(this).parent('div').remove();
            return false;
        });

        $('.nama').keyup(function(){
            var temp = $(this);
            $.ajax({
              url: 'act_kontak.php?aksi=2',
              type: 'POST',
              data: {val: $(this).val()},
              success: function(data, textStatus, xhr) {
                $('.cekNama').val(data);
                if ($('.cekNama').val() == "val") {
                    $('.valNama').remove();
                    $('.namaKontak').append("<div class='valNama controls'>Nama Sudah Dipakai</div>");
                    temp.closest('.control-group').addClass("error");
                } else{
                    $('.valNama').remove();
                    temp.closest('.control-group').removeClass("error");
                }
              }
            }); 
        });

        $('.jenis-p').click(function(){
            $('.jenis_kelamin').val('p');
            $(this).removeClass('icon-check-empty').addClass('icon-check');
            $(this).closest('div').find('.jenis-l').removeClass('icon-check').addClass('icon-check-empty');
        });

        $('.jenis-l').click(function(){
            $('.jenis_kelamin').val('l');
            $(this).removeClass('icon-check-empty').addClass('icon-check');
            $(this).closest('div').find('.jenis-p').removeClass('icon-check').addClass('icon-check-empty');
        });

        $('.nomorKontak').on('keyup', '.nomor', function(){
            var temp = $(this);
            $.ajax({
              url: 'act_kontak.php?aksi=3',
              type: 'POST',
              data: {val: $(this).val()},
              success: function(data, textStatus, xhr) {
                temp.closest('.controls').find('.cekNomor').val(data);
                if (temp.closest('.controls').find('.cekNomor').val() == "val") {
                    temp.closest('.controls').find('.valNomor').html("Nomor harus Angka");
                    temp.closest('.control-group').addClass("error")
                    $('.check-pri').removeClass('icon-check').addClass('icon-check-empty');
                    $('.primary').val('0');
                } else if(temp.closest('.controls').find('.cekNomor').val() == "val1") {
                    temp.closest('.controls').find('.valNomor').html("Data Salah");
                    temp.closest('.control-group').addClass("error")
                    $('.check-pri').removeClass('icon-check').addClass('icon-check-empty');
                    $('.primary').val('0');
                } else{
                    temp.closest('.controls').find('.valNomor').html("");
                    temp.closest('.control-group').removeClass("error")
                }
              }
            }); 
        });

        $('.nomorKontak').on('click', '.check-pri', function(){
            var temp = $(this).closest('div');
            if ((temp.find('.nomor').val() != "") && (temp.find('.cekNomor').val() == "")) {
                $('.check-pri').removeClass('icon-check').addClass('icon-check-empty');
                $('.primary').val('0');
                $(this).removeClass('icon-check-empty');
                $(this).addClass('icon-check');
                $(this).closest('div').find('.primary').val('1');
            };
        });

        $('.simpanKontak').click(function(){
            var cek = '0';
            var temp = '';
            arrNomor = [];
            $('.primary').each(function(){
                arrTempNomor = [];
                temp = $(this).closest('div');
                
                if ($(this).val() == '1') {
                    cek = "1";
                };
                
                if ((temp.find('.nomor').val() != "") &&  (temp.find('.cekNomor').val() == "")) {
                    arrTempNomor.push(temp.find('.nomor').val());
                    arrTempNomor.push(temp.find('.primary').val());
                    arrNomor.push(arrTempNomor);
                };
            });

            if (($('.nama').val() != "") && (cek == '1')) {
                var formKontak = {
                    id_kontak: <?php echo $id_kontak ?>,
                    nama : $('.nama').val(),
                    email : $('.email').val(),
                    jenis_kelamin : $('.jenis_kelamin').val(),
                    alamat : $('.alamat').val(),
                    tanggal : $('.tanggal').val(),
                    nomor : arrNomor
                };

                $.ajax({
                  url: 'act_kontak.php?aksi=5',
                  type: 'POST',
                  data: formKontak,
                  success: function(data, textStatus, xhr) {
                    // $('#form-modal-kontak').modal('hide');
                    location.reload();
                  }
                });
            }

        });
    });
</script>